<!DOCTYPE html>
<html><head>
    <title>5jiemian</title>
    <meta charset="utf-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<style type="text/css">
    html,
    body {
        margin:0;
        padding:0;
        width:100vw;
        height:100vh;
        position:relative;
        background-image:url("../assets/img/background.png");
        background-size: cover;
        background-repeat: no-repeat;
    }


    .container {
      width: 100%;
      /* height: 100%;
      /* width: 100vw;
      height: 100vh; */
      /* background-image:url("../assets/img/background.png");
      background-size: cover; */
    }

    .header {
      background-color: #996600;
      width: 100%;
    text-overflow: ellipsis;
    visibility: inherit;
      line-height: 20px;
      color: #FFF;
      padding: 0px 25px;
    }

    
    .view {
      width:100%;
      height:280px;
display:block;
margin:auto;

      cursor: pointer;
    }

    video {
      width: 350px;
      height: 280px;
        display:block;
        /* margin:20px auto; */
        margin: auto auto;
    }

    video::-webkit-media-controls {
      display: none !important;
    }

    .cortrols {
      width: 350px;
      height: 45px;
      margin: 0 auto;
      position: relative;
      top:-100px;
      display: none;
      z-index: 100;
      color: #fff;
      font-size: 14px;
      text-align: left;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      background-color: rgba(0, 0, 0, 0.5);
    }

    .corLeft {
      width: 350px;
      height: 50px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
    }

    .corRight {
      width: 300px;
      height: 50px;
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
    }

    .bofang {
      width: 50px;
      height: 50px;
      text-align: center;
    }

    .bofang img {
      margin-top: 10px;
    }

    .beisu {
      width: 150px;
      height: 50px;
    }

    .beisu input {
      width: 70px;
      height: 30px;
      line-height: 30px;
      margin-top: 10px;
      border-radius: 4px;
    }

    .shengyin {
      width: 50px;
      height: 50px;
      text-align: center;
    }

    .shengyin img {
      margin-top: 10px;
    }

    .end {
      width: 100%;
height:200px;
      position: relative;
      display: inline-block;
    }

    .left {
      z-index: 2;
      opacity: 0.8;

    }

    .right {
      margin-top: 10px;
      position: absolute;
      left: 100px;
      z-index: 1;
      opacity: 0.9;
    }

    .left2 {
      position: absolute;
margin:10px 17px 12px 12px;
      left: 200px;
      top: 25px;
      z-index: 1;
    }

    .right2 {
      position: absolute;
      left: 230px;
      top: 155px;
      z-index: 2;
      cursor: pointer;
    }

    .dialog-box {
      position: absolute;
      left: -200px;
      top: 0;
    font-size:10px;
      width: 200px;
      background-color: rgb(250, 249, 222);
      border: 1px solid #ccc;
      border-radius: 15px;
      padding: 10px;
      display: none;
    }

    .right2:hover {
      box-shadow: 0px 0px 15px #e2d849;
      border-radius: 50%;

    }

    .right2:hover .dialog-box {
      display: block;
    }

  </style>
    <script>
        $(document).ready(function () {
            function showCor() {
                $("#cor").show();
            }
            function hideCor() {
                $("#cor").hide();
            }
            var isPlay = true;
            // function bofang() {
            //     var vo = $("#vio")[0];
            //     if (isPlay) {
            //         vo.play();
            //         // $("#img1").attr("src", "../assets/img/zanting.png");
            //         $("#img1").attr("src", "../assets/img/zanting.png");
            //         isPlay = false;
            //     } else {
            //         vo.pause();
            //         $("#img1").attr("src", "../assets/img/bofang.png");
            //         // $("#img1").attr("src", "bofang.png");
            //         isPlay = true;
            //     }
            // }
            function bofang(){
              if(isPlay){
                $("#vio")
                $("#img1").attr("src","../assets/img/zanting.png");
                isPlay=false;
              }
              else{
                $("#vio")[0].pause();
                $("#img1").attr("src","../assets/img/bofang.png");
                isPlay=true;
              }
            }
            function getTime() {
                var str = $("#int").val();
                $("#vio")[0].currentTime = str;
            }
            function zcBoFang() {
                $("#vio")[0].playbackRate = 1;
            }
            function jsBoFang() {
                $("#vio")[0].playbackRate = 2;
            }
            var isJing = true;
            function jingyin() {
                if (isJing) {
                    $("#vio")[0].muted = !$("#vio")[0].muted;
                    $("#img2").attr("src", "../assets/img/jingyin.png");
                    isJing = false;
                } else {
                    $("#vio")[0].muted = !$("#vio")[0].muted;
                    $("#img2").attr("src", "../assets/img/shengyin.png");
                    isJing = true;
                }
            }
        });</script>
</head>

<body _c_t_j1="1">
    <div class="main">
        <div class="container">
            <div class="header">
                <h3>端午制曲：</h3>
                酒曲，就是将酿酒原料中的淀粉转化成为糖的一种物质。这种物质通常是用发霉的谷物，其中的霉菌既是酒曲。霉菌所分泌的酶可以将谷物中的淀粉和蛋白质转化成为糖。糖在酵母的作用下发酵成为酒精。
            </div>

            <div class="view" onmouseover="showCor()" onmouseout="hideCor()">
                <video id="vio" src="../assets/vedio/duanwuzhiqu.avi" controls="controls"></video>
                <!-- <video id="vio" src="../assets/vedio/duanwuzhiqu.avi" controls="controls"></video> -->
                <!-- <video id="vio" src="../assets/vedio/duanwuzhiqu.avi"></video> -->
                <div class="cortrols" id="cor">
                    <div class="corLeft">
                        <div class="bofang">
                            <img src="../assets/img/bofang.png" id="img1" onclick="bofang()" width="30" height="30">
                        </div>
                    </div>

                    <div class="corRight">
                        <div class="beisu">
                            <input type="button" value="正常播放" onclick="zcBoFang()">
                            <input type="button" value="加速播放" onclick="jsBoFang()">
                        </div>
                        <div class="shengyin">
                            <img src="../assets/img/shengyin.png" onclick="jingyin()" id="img2" width="30" height="30">
                        </div>
                    </div>
                </div>
            </div>

            <div class="end">

                <div class="last">
                    <div>
                        <div class="left">
                            <img class="left" src="../assets/img/duanwu2.png" width="145" height="330" alt="duanwu">

                            <div class="left2">
                                <img src="../assets/img/gufenglong.png" width="140" height="330" alt="long">
                            </div>


                            <div>
                                <div class="right">
                                    <img src="../assets/img/zhijiushi.png" width="200" height="330" alt="gongren">
                                </div>

                                <div class="right2">
                                    <img src="../assets/img//huangsetubiao.png" width="45" height="45" alt="cursor">
                                    <div class="dialog-box">
                                        茅台的酿酒先人们选择端午制曲，一是用于制曲的冬小麦在这个时候正好褪去了青涩的水分，用于制曲刚刚好，
                                        二是来端午时节的高温有利于微生物的生长，这些微生物混入曲块中分泌出大量的酶，可以加速淀粉，蛋白质等转化为糖分，
                                        三是因为这时候正是一种神奇的小生物 ～曲蚊，最为活跃的时候。
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body><chatgpt-sidebar data-gpts-theme="light"></chatgpt-sidebar><chatgpt-sidebar-popups data-gpts-theme="light"></chatgpt-sidebar-popups></html>